<template>
    <div>
        <div class="search-container" v-show="isSearchIcon">
            <el-input v-model="searchItem.menuName" placeholder="菜单名称"
                      style="width: 200px;margin-right: 5px;"></el-input>
            <el-input v-model="searchItem.isHidden" placeholder="菜单状态"
                      style="width: 200px;margin-right: 5px;"></el-input>
            <el-button type="primary" @click="onSearch"><i class="el-icon-search"></i> 查询</el-button>
        </div>
        <div class="handle-container">
            <div>
                <el-button type="primary" plain icon="el-icon-plus" @click="addMenu">添加菜单</el-button>
            </div>
            <div>
                <el-tooltip class="item" effect="dark" content="刷新数据" placement="bottom">
                    <el-button type="primary" icon="el-icon-refresh-left" circle plain></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="isShowSearchText" placement="bottom">
                    <el-button type="info" :icon="isSearchIcon?'el-icon-zoom-out':'el-icon-zoom-in'" circle plain
                               @click="closeSearch"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="显隐列" placement="bottom">
                    <el-button type="warning" icon="el-icon-s-grid" circle plain></el-button>
                </el-tooltip>
            </div>
        </div>
        <div>
            <el-table
                    ref="treeTable"
                    :data="menuList"
                    style="width: 100%;"
                    row-key="id"
                    border
                    lazy
                    :load="load"
                    :tree-props="{children: 'children', hasChildren: 'hasLeaf'}">
                <el-table-column
                        prop="menuName"
                        label="菜单名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="菜单路由"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon" aria-hidden="true"></i>
                        <span>{{ scope.row.icon }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="component"
                        label="组件名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="isHidden"
                        label="是否显示"
                        width="180">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isHidden"
                                active-color="#ff4949"
                                inactive-color="#13ce66">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="IsDisable"
                        label="是否禁用"
                        width="180">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.IsDisable">禁用</el-tag>
                        <el-tag type="success" v-else>启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        prop="id"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   :disabled="scope.row.menuName=='首页'" @click="onEdit(scope.row)"
                                   style="padding: 3px">编辑
                        </el-button>
                        <el-button type="danger"
                                   :disabled="scope.row.menuName=='首页'" @click="onDel(scope.row)"
                                   style="padding: 3px">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-drawer
                    title="新增菜单"
                    :visible.sync="drawer"
                    :direction="direction"
                    size="28%"
                    :before-close="handleClose"
                    @closed="onClose">
                <el-form ref="form" :model="menuInfo" label-width="100px" :rules="rules">
                    <el-row :gutter="10">
                        <el-col :span="18" v-if="operatorType==1">
                            <el-form-item label="菜单类型" prop="menuType">
                                <el-radio-group v-model="menuType" @change="menuTypeChange">
                                    <el-radio label="1" border>一级菜单</el-radio>
                                    <el-radio label="2" border>一级目录</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" v-show="menuType==2">
                        <el-col :span="18">
                            <el-form-item label="一级菜单" prop="parentId">
                                <el-select v-model="menuInfo.parentId" placeholder="请选择一级菜单名称" clearable filterable>
                                    <el-option
                                            v-for="item in menuLevelData"
                                            :key="item.id"
                                            :label="item.menuName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="菜单名称" prop="menuName">
                                <el-input v-model="menuInfo.menuName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="组件名称" prop="component">
                                <el-input
                                        v-model="menuInfo.component"
                                        :disabled="showComponent">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="菜单路由" prop="path">
                                <el-input v-model="menuInfo.path"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="菜单图标" prop="icon">
                                <el-input v-model="menuInfo.icon" :prefix-icon="menuInfo.icon"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="菜单排序" prop="orderNum">
                                <el-input-number v-model="menuInfo.orderNum" :min="1" :max="100"
                                                 label="排序数"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="菜单显示" prop="isHidden">
                                <el-switch
                                        v-model="menuInfo.isHidden"
                                        active-color="#ff4949"
                                        inactive-color="#13ce66">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-form-item label="备注信息" prop="remark">
                                <el-input v-model="menuInfo.remark" type="textarea"
                                          placeholder="请输入备注信息"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" justify="center" type="flex">
                        <el-col :span="6">
                            <el-button type="primary" plain @click="onSubmit" icon="el-icon-check">确定
                            </el-button>
                        </el-col>
                        <el-col :span="6" v-if="operatorType==1">
                            <el-button type="warning" plain @click="onReset" icon="el-icon-refresh">重置
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script>


import {load, getLevel, added, deleted, getTop, getMenus} from "@/api/menus";

export default {
    name: "index",
    data() {
        let validateParentId = (rule, value, callback) => {
            if (this.menuType != 1 && value == null) {
                callback(new Error('请选择一级菜单!'));
            } else {
                callback();
            }
        };
        return {
            drawer: false,
            direction: "rtl",
            operatorType: 1, //1表示添加 2表示更新
            searchItem: {
                menuName: "",
                isHidden: ""
            },
            isShowSearchText: "关闭查询",
            isSearchIcon: true,
            menuList: [],
            menuInfo: {
                component: "Layout",
                icon: "",
                isDel: false,
                isDisable: false,
                isHidden: false,
                menuName: "",
                orderNum: 0,
                parentId: null,
                path: "",
                remark: "",
                hasLeaf: false,
            },
            menuType: "1",
            menuLevelData: [],
            menuTop: null,
            rules: {
                component: [
                    {required: true, message: '请输入组件名称', trigger: 'blur'}
                ],
                icon: [
                    {required: true, message: '请输入图标名称', trigger: 'blur'}
                ],
                parentId: [
                    {validator: validateParentId, message: '请选择一级菜单', trigger: 'blur'}
                ],
                path: [
                    {required: true, message: '请输入菜单路由', trigger: 'blur'}
                ],
                menuName: [
                    {required: true, message: '请输入菜单名称', trigger: 'blur'}
                ]
            }
        }
    },
    mounted() {
        this.initMenus();
        this.initMenuLevelData();
        this.initMenuTop();
    },
    computed: {
        showComponent() {
            if (this.operatorType == 2) {
                if (this.menuInfo.component == "Layout") {
                    return true;
                }
                return false;
            } else {
                return this.menuType == 1 ? true : false
            }
        }
    },
    methods: {
        /*******初始化操作*********/
        initMenus() {
            load().then(res => {
                this.menuList = res.data;
            })
        },
        initMenuLevelData() {
            getLevel().then(res => {
                let data = res.data.filter(x => x.menuName !== "首页");
                this.menuLevelData = data;
            })
        },
        initMenuTop() {
            getTop().then(res => {
                this.menuTop = res.data;
            })
        },
        /**********按钮操作************/
        closeSearch() {
            this.isSearchIcon = !this.isSearchIcon;
            this.isShowSearchText = this.isSearchIcon ? "关闭查询" : "打开查询";
        },
        addMenu() {
            this.drawer = true;
        },
        //TODO:菜单查询的实现问题  这个不用看
        onSearch() {
        },
        /*******treeTable操作******/
        load(row, treeNode, resolve) {
            load(row.id).then(res => {
                resolve(res.data);
            })
        },
        onDel(row) {
            this.$confirm("您确定要删除当前菜单吗?", "操作提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleted({id: row.id}).then(res => {
                    if (res) {
                        this.$message.success(res.message);
                        this.refreshRow(row.parentId);
                    }
                });
            }).catch(() => {
                this.$message.info("已取消删除");
            })
        },
        onEdit(row) {
            Object.assign(this.menuInfo, row);
            this.drawer = true;
            this.operatorType = 2;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.reset();
                    done();
                })
                .catch(_ => {
                });
        },
        refreshRow(id) {
            load(id).then(res => {
                if (res) {
                    if (id == this.menuTop.id || id == null) {
                        this.menuList = res.data;
                    }
                    this.$set(this.$refs.treeTable.store.states.lazyTreeNodeMap, id, res.data)
                }
            })
        },
        /*******Drawer抽屉操作******/
        menuTypeChange(val) {
            if (val == 1) {
                this.menuInfo.parentId = null;
                this.menuInfo.component = "Layout";
            } else {
                this.menuInfo.component = "";
            }
        },
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    added(this.menuInfo).then(res => {
                        if (res) {
                            this.$message.success(res.message);
                            this.drawer = false;
                            // this.initMenus();
                            this.initMenuLevelData();
                            this.refreshRow(this.menuInfo.parentId);
                            this.reset();
                        }
                    })
                } else {
                    console.log('添加菜单失败');
                    return false;
                }
            });
        },
        onReset() {
            this.reset();
        },
        onClose() {
            this.reset();
        },
        /****************公用操作*************************/
        //重置数据
        reset() {
            this.$refs.form.resetFields();
            this.menuType = "1";
        }
    },
}
</script>

<style scoped>

.search-container {
    width: 100%;
    display: flex;
    justify-content: right;
}

.handle-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}


</style>